<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}">
    <div v-loading="loading" class="detail-order-info no-margin small-padding">
      <div class="mb-24">
        <Title title="客户信息" style="margin-bottom:10px;"/>
        <el-row class="detail-row">
          <el-form :class="{'mobile-el-form': showMobilePage}" label-position="right" label-width="125px" class="content">
            <el-col :span="8">
              <el-form-item label="客户名称:">
                <div class="clientName-container">
                  <ToolTip :content="data.clientName" class="clientName-container-label" />
                  <SearchContract v-if="data.clientName" :opp-company-id="data.id" :opp-company="data.clientName" :opp-company-type="4" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户类型:">
                <span>{{ data.clientType ? '个人' : '公司' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人:">
                <CheckUserInfo :user-id="data.createUserId" :label="data.createName" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标签:">
                <TagSelect v-model="data.tag" mode="detail" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注:">
                <ToolTip :content="data.remark" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属部门:">
                <ToolTip :content="data.department | formatTag" />
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="mb-24">
        <Title title="开票信息" style="margin-bottom:10px;"/>
        <el-row class="detail-row">
          <el-form :class="{'mobile-el-form': showMobilePage}" label-position="right" label-width="125px" class="content">
            <el-col :span="8">
              <el-form-item label="纳税人识别号:">
                <SecretText :log-text="getLogText('纳税人识别号')" :origin-text="data.invoiceInfo.taxpayerNum" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开户行:">
                <ToolTip :content="data.invoiceInfo.openBank" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开户账号:">
                <SecretText :log-text="getLogText('开户账号')" :origin-text="data.invoiceInfo.accountNum" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注册电话:">
                <SecretText :log-text="getLogText('注册电话')" :origin-text="data.invoiceInfo.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开票地址:">
                <SecretText :log-text="getLogText('开票地址')" :origin-text="data.invoiceInfo.invoiceAddress" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="一般纳税人证明:">
                <FileShowList :file-list="data.invoiceInfo.taxpayerAttachment || []" />
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div>
        <Title title="联系人" style="margin-bottom:10px;"/>
        <el-table
          v-if="data.contactObj.length > 0"
          :data="handelData(data.contactObj)"
          height="300"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          header-cell-class-name="order-data-header-cell"
          fit
          hightlight-current-row>>
          <el-table-column label="客户联系人" width="120">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.contactPerson" />
            </template>
          </el-table-column>
          <el-table-column label="联系方式" width="120">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.tel" />
            </template>
          </el-table-column>
          <el-table-column label="协作人" width="120">
            <template slot-scope="scope">
              <CheckUserInfo
                v-if="scope.row.associate"
                :user-list="scope.row.associate"
                :multiple="scope.row.associate.length > 1"
                :user-id="scope.row.associate.length === 1?scope.row.associate[0].id:null"
                :label="scope.row.associate.length === 1?scope.row.associate[0].userName:null"
              />
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column label="协作部门" width="120">
            <template slot-scope="scope">
              <ToolTip :content="joinName(scope.row.coDepartment, 'name')" />
            </template>
          </el-table-column>
          <el-table-column label="创建人" prop="creator" width="120" >
            <template slot-scope="scope">
              <CheckUserInfo v-if="scope.row.creatorId" :user-id="scope.row.creatorId" :label="scope.row.creator" />
              <ToolTip v-else :content="scope.row.creator" />
            </template>
          </el-table-column>
          <el-table-column label="所属部门" width="120">
            <template slot-scope="scope">
              <ToolTip :content="joinName(scope.row.department, 'name')" />
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="120">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.createTime | format('YYYY/MM/DD HH:mm')" />
            </template>
          </el-table-column>
        </el-table>
        <EmptyPlaceholder v-else slot="empty" empty-text="暂无数据" mode="table" style="padding-bottom: 0;" />
        <el-row type="flex" class="pagination-area">
          <el-pagination
            v-show="data.contactObj.length > 10"
            :current-page="page"
            :page-size="perPage"
            :total="data.contactObj.length"
            :page-sizes="[10, 20, 50]"
            :layout="'total, sizes, prev, pager, next, jumper'"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </el-row>
      </div>
      <fixed-pagination>
        <div class="center">
          <el-button
            v-if="hasRouteAuth('mengli:customer:edit')"
            type="primary"
            size="small"
            @click="toEdit">编辑</el-button>
          <el-button type="info" class="cancel-btn-style" size="small" @click="toBack"><span style="font-size:14px;">返回</span></el-button>
        </div>
      </fixed-pagination>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title';
import TagSelect from '@/components/Common/tagSelect';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import SearchContract from '@/components/Common/SearchContract';
import FileShowList from '@/components/CreateOrder/fileShowList';
import { hasRouteAuth } from '@/utils/permission';
import { getMengliCustomerInfo } from '@/api/mengli';
import { format } from '@/filters/date';
import { formatTag } from '@/filters/dept';
import { mapState } from 'vuex';

export default {
  components: { Title, TagSelect, EmptyPlaceholder, FileShowList, SearchContract },
  filters: { format, formatTag },
  data() {
    return {
      loading: false,
      customerId: null,
      page: 1,
      perPage: 10,
      data: {
        invoiceInfo: {},
        contactObj: []
      }
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.customerId = this.$route.params.customerId;
    this.getData();
  },
  methods: {
    hasRouteAuth,
    async getData() {
      const { data } = await getMengliCustomerInfo(this.customerId);
      this.data = data;
    },
    joinName(data, key) {
      if (!data) return '--';
      const temp = data.map(item => {
        return item[key];
      }).join();
      return temp;
    },
    handelData(data) {
      return data.slice((this.page - 1) * this.perPage, this.page * this.perPage);
    },
    handleSizeChange(val) {
      this.perPage = val;
    },
    handleCurrentChange(val) {
      this.page = val;
    },
    toEdit() {
      this.$router.push({
        name: 'editMengliCustomer',
        params: { customerId: this.customerId }
      });
    },
    toBack() {
      this.$router.push({ name: 'mengliCustomer' });
    },
    getLogText(label) {
      return `萌力客户 ${this.data.clientName} 的 ${label}`;
    }
  }
};
</script>

<style lang="scss" scoped>
.detail-order-info {
  margin: 16px;
  background-color: #fff;
  padding: 24px 24px 50px 24px;
  min-height: calc(100vh - 70px);
  &::v-deep {
    .el-form-item {
      // height: 30px;
      overflow: hidden;
      margin-bottom: 0px;
      .el-form-item__label {
        color: #999;
      }
    }
    .pagination-area {
      justify-content: flex-end;
    }
  }
  .content{
    .el-col{
      border-right: 1px solid #EBEEFD;
      &:last-of-type{
        border-right: none;
      }
    }
  }
}
.mb-24 {
  margin-bottom: 24px;
}
.clientName-container {
  display: flex;
  .clientName-container-label {
    max-width: calc(100% - 70px);
  }
}
</style>
